﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .win-settingsflyout {
            width: 300px;
        }

        #AboutSettings #TopBar {
            width: 100%;
            height: 50px;
            display: -ms-grid;
            -ms-grid-rows: 1fr;
            -ms-grid-columns: 40px 40px 1fr;
            background: #00A2E8;
            padding-top: 30px;
        }

        #AboutSettings #TopBar button {
            -ms-grid-column: 2;
            border-color: white;
            color: white;
        }
            
        #AboutSettings #TopBar h2 {
            -ms-grid-column: 3;
            color: white;
            padding-right: 20px;
        }

        #AboutSettings #Content {
            padding: 20px;
        }
    </style>
    <script>
        (function () {

            "use strict";

            var pageControl = WinJS.UI.Pages.define("/html/about-settings.html", {

                ready: function (element, options) {

                    $("#TopBar button").listen("click", function (e) {

                        WinJS.UI.SettingsFlyout.show();
                    });
                }
            });
        })();
    </script>
</head>
<body>
    <section id="AboutSettings" data-win-control="WinJS.UI.SettingsFlyout"
             data-win-options="{ settingsCommandId: 'about' }">
        <section id="TopBar">
            <button class="win-backbutton"></button>
            <h2>About</h2>
        </section>
        <section id="Content">
            This App uses:
            <ul>
                <li>Three.js</li>
                <li>GSVPano.js</li>
                <li>Hyperlapse.js</li>
            </ul>
            Created using Google Street View Imagery<br />
            See More at <a href="http://hyperlapse.tllabs.io">hyperlapse.tllabs.io</a>
        </section>
    </section>
</body>
</html>